import React from "react";
import {Box, Breadcrumbs, Container, Grid, Link, Paper} from "@mui/material";
import './Recommend.css'
import MusicCard from "../MusicCard/MusicCard";
import _ from "lodash";
import PubSub from "pubsub-js";

const {get163HotPlayList} = require("../../utils/request/163request")
const {getQHotPlayList} = require("../../utils/request/qrequest")
const {getKgHotPlayList} = require("../../utils/request/kgrequest")
const {getMgHotPlayList} = require("../../utils/request/migurequest")
const {getKwHotPlayList} = require("../../utils/request/kwrequest")

const Store = window.electron_store;

function getRandomArrayElements(arr, count) {
    return _.slice(_.shuffle(arr),0,count);
}


//let yURL = 'https://y.qq.com';
// let cURL = 'https://c.y.qq.com';
export default class Recommend extends React.Component {
    state = {
        data:[],
        qdata:[],
        ndata:[],
        kgdata:[],
        mgdata:[],
        kwdata:[],
        now:'1',
        loading:true
    }

    getAllList(){
        //console.log("all")
        return Promise.all([
            get163HotPlayList((r) => {
                this.state.ndata = r
            }),
            // get163HotPlayList((r) => {
            //     this.state.qdata = r
            // }),
            // get163HotPlayList((r) => {
            //     this.state.kgdata = r;
            // }),
            // get163HotPlayList((r) => {
            //     this.state.mgdata = r;
            // }),
            // get163HotPlayList((r) => {
            //     this.state.kwdata = r;
            // }),


            getQHotPlayList((r) => {
                this.state.qdata = r
            }),
            getKgHotPlayList((r) => {
                this.state.kgdata = r;
            }),
            getMgHotPlayList((r) => {
                this.state.mgdata = r;
            }),
            getKwHotPlayList((r) => {
                this.state.kwdata = r;
            })
            ]
        )
    }
    async get8ItemFromDatas(){

        this.state.data = []
        await this.getAllList()

        let v1 = getRandomArrayElements(this.state.ndata,4);
        let v2 = getRandomArrayElements(this.state.qdata, 4)
        let v3 = getRandomArrayElements(this.state.kgdata, 4)
        let v4 = getRandomArrayElements(this.state.mgdata, 4)
        let v5 = getRandomArrayElements(this.state.kwdata, 4)
        let v = _.concat(v1,v2,v3,v4,v5);
        let vr = getRandomArrayElements(v, 8);
        this.setState({loading:false})
        this.setState({data: vr})

    }
    constructor(props) {
        super(props);


    }
    componentDidMount() {
        PubSub.publish("changeTopBarByUrl",'1');
        this.get8ItemFromDatas();
    }

    changeListRec = (w) => {
        return () => {
            switch (w){
                case '1':
                    let v1 = getRandomArrayElements(this.state.ndata,4);
                    let v2 = getRandomArrayElements(this.state.qdata, 4)
                    let v3 = getRandomArrayElements(this.state.kgdata, 4)
                    let v4 = getRandomArrayElements(this.state.mgdata, 4)
                    let v5 = getRandomArrayElements(this.state.kwdata, 4)
                    let v = _.concat(v1,v2,v3,v4,v5);
                    let vr = getRandomArrayElements(v, 8);
                    this.state.data = []
                    this.setState({data: vr});
                    break;
                case '3':
                    let q = getRandomArrayElements(this.state.qdata,8);
                    this.state.data = []
                    this.setState({data:q});
                    break;
                case '2':
                    this.state.data = []
                    let n = getRandomArrayElements(this.state.ndata,8);
                    this.setState({data:n});
                    break;
                case '4':
                    this.state.data = []
                    let kg = getRandomArrayElements(this.state.kgdata,8);
                    this.setState({data:kg});
                    break;
                case '5':
                    this.state.data = []
                    let mg = getRandomArrayElements(this.state.mgdata,8);
                    this.setState({data:mg});
                    break;
                case '6':
                    this.state.data = []
                    let kw = getRandomArrayElements(this.state.kwdata,8);
                    this.setState({data:kw});
                    break;
            }

            this.setState({now:w})
        }

    }
    render() {
        const {now} = this.state
        let items = []
        for (let i = 0; i < 8; i++) {
            items.push(<Grid key={i+'xxxxzzzzG'} className='musics'>
                <MusicCard  loading={this.state.loading} key={i+'xxxxzzzz'}/>
            </Grid>);
        }
        return (
            <Container maxWidth="xl">
                <Paper className='page' elevation={3}>
                    <Grid
                        container
                        direction="row"
                        justifyContent="center"
                        alignItems="flex-end"
                    >
                        <Grid container item xs={12} height='100px' alignItems="center" justifyContent="center">
                            <Box sx={{fontFamily: 'Lucida Console', fontSize: 'h4.fontSize'}}>
                                歌单推荐
                            </Box>
                        </Grid>
                        <Grid container item xs={12} alignItems="center" justifyContent="center">
                            <Breadcrumbs separator="|" aria-label="breadcrumb">
                                <Link  underline="hover"
                                       color="inherit"
                                       href="#"
                                       onClick={this.changeListRec('1')}
                                >

                                    <div className={`${now === '1'? 'underline':''}`}>随机推荐</div>
                                </Link>


                                <Link
                                    onClick={this.changeListRec('2')}
                                    underline="hover"
                                    color="inherit"
                                      href="#"
                                >
                                    <div className={`${now === '2'? 'underline':''}`}>网易</div>

                                </Link>
                                <Link
                                      onClick={this.changeListRec('3')}
                                    underline="hover"
                                    color="inherit"
                                    href="#"
                                >
                                    <div className={`${now === '3'? 'underline':''}`}>QQ</div>

                                </Link>


                                <Link
                                    onClick={this.changeListRec('4')}
                                    underline="hover"
                                    color="inherit"
                                    href="#"
                                >
                                    <div className={`${now === '4'? 'underline':''}`}>酷狗</div>

                                </Link>
                                <Link
                                    onClick={this.changeListRec('5')}
                                    underline="hover"
                                    color="inherit"
                                    href="#"
                                >
                                    <div className={`${now === '5'? 'underline':''}`}>咪咕</div>

                                </Link>
                                <Link
                                    onClick={this.changeListRec('6')}
                                    underline="hover"
                                    color="inherit"
                                    href="#"
                                >
                                    <div className={`${now === '6'? 'underline':''}`}>酷我</div>

                                </Link>

                            </Breadcrumbs>
                        </Grid>


                        <Grid container item xs={12} alignItems="center" justifyContent="center">
                            <hr/>
                        </Grid>



                    </Grid>
                    <Grid  container item columns={14}  alignItems="center"  justifyContent="center">
                        {this.state.loading?
                            items
                            :
                            this.state.data.slice(0,8).map(i =>{
                                let r = i;
                                let from = i.from;
                                let allList = []
                                if(from === '163'){
                                    allList = this.state.ndata;
                                }else if(from === 'kugou'){
                                    allList = this.state.kgdata;
                                }
                                else if(from === 'kuwo'){

                                    allList = this.state.kwdata;
                                }
                                else if(from === 'migu'){

                                    allList = this.state.mgdata;
                                }
                                else if(from === 'qq'){

                                    allList = this.state.qdata;
                                }
                                return (<Grid key={r.id+'G'} item className='musics'>
                                        <MusicCard loading={this.state.loading} key={r.id} allList={allList} {...r}/>
                                    </Grid>
                                )
                            } )

                        }

                    </Grid>
                </Paper>

            </Container>
        );
    }
}

